<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>


<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Student',
    data() {
        console.log(this);
        return {
            msg:'我是一个尚硅谷的学生',
            myAge: this.age
        }
    },
    methods: {
        updateAge() {
            this.myAge++
        }
    },
    //简单的声明接受
    // props: ['name','age','sex']
    // props: {
    //     name:String,
    //     age:Number,
    //     sex:String
    // }
    props: {
        name:{
            type:String,
            require:true,
        },
        age:{
            type:Number,
            default:99,
        },
        sex:{
            type:String,
            require:true,
        },
    }
}
</script>

<style>
    .demo {
        background-color: pink;
    }
</style>